<template>
  <div class="future-weather">
    <div>
      <h1>{{ location.name }}</h1>
      <div class="sstq">
        <h2>未来七天的天气</h2>
        <div class="SD">
          <h3>{{ d0.fxDate }}</h3>
          <div>
            <div>
              <span>白天天气：</span>
              <i :class="a1"></i>
            </div>
            <div>
              <span>夜间天气：</span>
              <i :class="a2"></i>
            </div>
            <div>
              <p>最高气温：{{ d0.tempMax }}°</p>
              <p>最低气温：{{ d0.tempMin }}°</p>
            </div>
          </div>
        </div>
        <div class="SD">
          <h3>{{ d1.fxDate }}</h3>
          <div>
            <div>
              <span>白天天气：</span>
              <i :class="a3"></i>
            </div>
            <div>
              <span>夜间天气：</span>
              <i :class="a4"></i>
            </div>
            <div>
              <p>最高气温：{{ d1.tempMax }}°</p>
              <p>最低气温：{{ d1.tempMin }}°</p>
            </div>
          </div>
        </div>
        <div class="SD">
          <h3>{{ d2.fxDate }}</h3>
          <div>
            <div>
              <span>白天天气：</span>
              <i :class="a5"></i>
            </div>
            <div>
              <span>夜间天气：</span>
              <i :class="a6"></i>
            </div>
            <div>
              <p>最高气温：{{ d2.tempMax }}°</p>
              <p>最低气温：{{ d2.tempMin }}°</p>
            </div>
          </div>
        </div>
        <div class="SD">
          <h3>{{ d3.fxDate }}</h3>
          <div>
            <div>
              <span>白天天气：</span>
              <i :class="a7"></i>
            </div>
            <div>
              <span>夜间天气：</span>
              <i :class="a8"></i>
            </div>
            <div>
              <p>最高气温：{{ d3.tempMax }}°</p>
              <p>最低气温：{{ d3.tempMin }}°</p>
            </div>
          </div>
        </div>
        <div class="SD">
          <h3>{{ d4.fxDate }}</h3>
          <div>
            <div>
              <span>白天天气：</span>
              <i :class="a9"></i>
            </div>
            <div>
              <span>夜间天气：</span>
              <i :class="a10"></i>
            </div>
            <div>
              <p>最高气温：{{ d4.tempMax }}°</p>
              <p>最低气温：{{ d4.tempMin }}°</p>
            </div>
          </div>
        </div>
        <div class="SD">
          <h3>{{ d5.fxDate }}</h3>
          <div>
            <div>
              <span>白天天气：</span>
              <i :class="a11"></i>
            </div>
            <div>
              <span>夜间天气：</span>
              <i :class="a12"></i>
            </div>
            <div>
              <p>最高气温：{{ d5.tempMax }}°</p>
              <p>最低气温：{{ d5.tempMin }}°</p>
            </div>
          </div>
        </div>
        <div class="SD">
          <h3>{{ d6.fxDate }}</h3>
          <div>
            <div>
              <span>白天天气：</span>
              <i :class="a13"></i>
            </div>
            <div>
              <span>夜间天气：</span>
              <i :class="a14"></i>
            </div>
            <div>
              <p>最高气温：{{ d6.tempMax }}°</p>
              <p>最低气温：{{ d6.tempMin }}°</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  
<script>
import "qweather-icons/font/qweather-icons.css"
import axios from "axios";
import { KEY, API_7D } from "@/common/constrants";
import { mapState } from "vuex"
export default {
  data() {
    return {
      d0: [],
      a1: [],
      a2: [],
      d1: [],
      a3: [],
      a4: [],
      d2: [],
      a5: [],
      a6: [],
      d3: [],
      a7: [],
      a8: [],
      d4: [],
      a9: [],
      a10: [],
      d5: [],
      a11: [],
      a12: [],
      d6: [],
      a13: [],
      a14: [],
    }
  },
  watch: {
    location: function () {
      this.getData();
    }
  },
  methods: {
    getData() {
      axios
        .get(API_7D, {
          params: {
            location: this.location.id,
            key: KEY
          }
        }).then(res => {
          console.log(res.data)
          this.d0 = res.data.daily[0];
          this.a1 = "qi-" + res.data.daily[0].iconDay
          this.a2 = "qi-" + res.data.daily[0].iconNight
          this.d1 = res.data.daily[1];
          this.a3 = "qi-" + res.data.daily[1].iconDay
          this.a4 = "qi-" + res.data.daily[1].iconNight
          this.d2 = res.data.daily[2];
          this.a5 = "qi-" + res.data.daily[2].iconDay
          this.a6 = "qi-" + res.data.daily[2].iconNight
          this.d3 = res.data.daily[3];
          this.a7 = "qi-" + res.data.daily[3].iconDay
          this.a8 = "qi-" + res.data.daily[3].iconNight
          this.d4 = res.data.daily[4];
          this.a9 = "qi-" + res.data.daily[4].iconDay
          this.a10 = "qi-" + res.data.daily[4].iconNight
          this.d5 = res.data.daily[5];
          this.a11 = "qi-" + res.data.daily[5].iconDay
          this.a12 = "qi-" + res.data.daily[5].iconNight
          this.d6 = res.data.daily[6];
          this.a13 = "qi-" + res.data.daily[6].iconDay
          this.a14 = "qi-" + res.data.daily[6].iconNight
        })
    },

  },
  computed: {
    ...mapState([
      "location"
    ])
  },
  mounted() {
    this.getData()
  }
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
h1 {
  margin: 3rem 0;
}
h2{
  padding-top: 3rem;
}
.sstq{
  width: 60rem;
  height: 20rem;
  background-color: #d6dded;
  margin: auto;
  border-radius: 1.5rem;
}
.SD{
  display: inline-block;
  text-align:left;
  margin: 3rem 0.6rem;
  line-height: 2rem;
}
</style>
  